<template>
	<view>
		<view class='searchGood'>
			<view class='search acea-row row-between-wrapper'>
				<view class='input acea-row row-between-wrapper'>
					<text class='iconfont iconsousuo-copy'></text>
					<input type='text' :value='searchValue' autofocus="autofocus" :focus="focus" :placeholder="$t('cloudW.searchForProductOrBrandYouLike')" placeholder-class='placeholder' @input="setValue" @confirm="searchSubmit"></input>
				</view>
				<view class='bnt' @tap='searchBut'>{{$t('cloudW.search')}}</view>
			</view>
			<view class="titWarp" v-if="lishiSearchList.length != 0">
				<view class='title'>{{$t('cloudW.historySearch')}}</view>
				<view class="iconfont iconshanchu" @click="clearLishi"></view>
			</view>
			<view class='list acea-row' v-if="lishiSearchList.length != 0">
				<block v-for="(item,index) in lishiSearchList" :key="index">
					<view class='item' @tap='setHotSearchValue(item)'>{{item}}</view>
				</block>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		getSearchKeyword,
	} from '@/api/store.js';
	export default {
		components: {
			
		},
		data() {
			return {
				searchValue: '',//搜索关键词
				focus: true,//输入框聚焦
				
				hotSearchList: [],//热门关键词
				lishiSearchList:[],//历史关键词
			};
		},
		onLoad(options) {
			if(options.keyword){
				this.searchValue = options.keyword
			}
		},
		onShow: function() {
			var that = this
			// 获取本地存储历史搜索词
			try {
			    const value = uni.getStorageSync('lishiSearchTestList');
			    if (value) {
			        that.lishiSearchList = value
			    }
			} catch (e) {
			    that.lishiSearchList = []
			}
			uni.setNavigationBarTitle({
				title: this.$t('navigation.searchForProducts')
			});
		},
		onReachBottom: function() {
			
		},
		methods: {
			// 清除历史搜索
			clearLishi(){
				var that = this
				uni.removeStorage({
				    key: 'lishiSearchTestList',
				    success: function (res) {
				        that.lishiSearchList = []
						uni.showToast({
							title: that.$t('cloudW.successfullyDeleted')  //删除成功
						})
				    }
				});
			},
			//关键词跳转
			setHotSearchValue: function(event) {
				var that = this
				this.$set(that, 'searchValue', event);
				if(that.lishiSearchList.indexOf(that.searchValue) == -1){
					if(this.lishiSearchList.length>=10){
						this.lishiSearchList.pop()
					}
					that.lishiSearchList.splice(0,0,that.searchValue)
					uni.setStorage({
					    key: 'lishiSearchTestList',
					    data: that.lishiSearchList
					});
				}
				
				uni.redirectTo({
					url: `/pages/goods_management/index?word=${that.searchValue}&id=0`
				})
			},
			// 输入框变化
			setValue: function(event) {
				let that = this
				that.$set(that, 'searchValue', event.detail.value);
			},
			// 输入框确定
			searchSubmit: function(e){
				var that = this
				if(this.lishiSearchList.indexOf(this.searchValue) == -1){
					if(this.lishiSearchList.length>=10){
						this.lishiSearchList.pop()
					}
					this.lishiSearchList.splice(0,0,this.searchValue)
					uni.setStorage({
					    key: 'lishiSearchTestList',
					    data: this.lishiSearchList
					});
				}
				
				uni.redirectTo({
					url: `/pages/goods_management/index?word=${that.searchValue}&id=0`
				})
			},
			// 搜索按钮
			searchBut: function() {
				let that = this;
				that.focus = false;
				if (that.searchValue.length > 0) {
					// 添加到历史
					if(this.lishiSearchList.indexOf(that.searchValue) == -1){
						if(this.lishiSearchList.length>=10){
							this.lishiSearchList.pop()
						}
						this.lishiSearchList.splice(0,0,that.searchValue)
						uni.setStorage({
						    key: 'lishiSearchTestList',
						    data: this.lishiSearchList
						});
					}
					
					uni.redirectTo({
						url: `/pages/goods_management/index?word=${that.searchValue}&id=0`
					})
				} else {
					uni.showToast({
						icon: "none",
						title: this.$t('cloudW.pleaseEnterTheProductYouWantToSearch')   //请输入要搜索的商品
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchGood {
		min-height: 100vh;
		background-color: #fff;
		padding-top: 20rpx;
		.search {
			padding-left: 30rpx;
			.input {
				width: 598rpx;
				background-color: #f7f7f7;
				border-radius: 5rpx;
				padding: 0 35rpx;
				box-sizing: border-box;
				height: 66rpx;
				input {
					width: 472rpx;
					font-size: 28rpx;
				}
				.placeholder {
					color: #bbb;
					font-weight: lighter;
				}
				.iconfont {
					color: #000;
					font-size: 35rpx;
				}
			}
			.bnt {
				width: 120rpx;
				text-align: center;
				height: 66rpx;
				line-height: 66rpx;
				font-size: 30rpx;
				color: #282828;
			}
		}
		.titWarp {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.iconfont {
				padding: 10rpx 30rpx;
			}
		}
		.title {
			font-size: 30rpx;
			color: #222;
			margin: 28rpx 30rpx 25rpx 30rpx;
		}
		.list {
			padding-left: 10rpx;
			.item {
				font-size: 26rpx;
				color: #222;
				padding: 0 21rpx;
				height: 60rpx;
				border-radius: 3rpx;
				line-height: 60rpx;
				background: #F6F6F6;
				border-radius: 4px;
				margin: 0 0 20rpx 20rpx;
			}
		}
		.line {
			border-bottom: 1rpx solid #eee;
			margin: 20rpx 30rpx 0 30rpx;
		}
	}
</style>
